<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的歌单</title>
</head>
<body>
<div>
    <a href="space.html">大厅</a>
</div>
<div id="app">
    <template>
        <!-- 创建歌单对话框 -->
        <el-button type="primary" @click="dialogVisiblePlaylist = true">新建歌单</el-button>
        <el-dialog title="创建歌单" :visible.sync="dialogVisiblePlaylist" width="30%">
            <el-form>
                <el-form-item label="歌单名称">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="歌单封面">
                    <input type="file" ref="fileInput" @change="handleFileChange">
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisiblePlaylist = false">取消</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </span>
        </el-dialog>

        <!-- 歌曲列表对话框 -->

<!--        歌曲操作对话-->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisibleSong" width="70%">
            <el-table :data="songData" style="width: 100%">
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column prop="userName" label="作者"></el-table-column>
                <el-table-column prop="name" label="歌名"></el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <!-- 移入模式显示按钮 -->
                        <el-button
                                v-if="isAddMode"
                                size="mini"
                                type="success"
                                @click="handleAddToPlaylist(scope.row)">
                            移入歌单
                        </el-button>

                        <!-- 移出模式显示按钮 -->
                        <el-button
                                v-else
                                size="mini"
                                type="danger"
                                @click="handleRemoveFromPlaylist(scope.row)">
                            移出歌单
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
<!--            歌曲对话分页-->
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChangeSong"
                        @current-change="handleCurrentChangeSong"
                        :current-page="currentPageSong"
                        :page-sizes="[5, 10, 20]"
                        :page-size="pageSizeSong"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalCountSong">
                </el-pagination>
            </div>
        </el-dialog>
    </template>

    <!-- 歌单列表 -->
    <template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="100"></el-table-column>
            <el-table-column label="封面" width="100" >
                <template slot-scope="scope"><img controls :src="scope.row.coverPath" width="40" height="40" ></template>
            </el-table-column>
            <el-table-column prop="userName" label="创建者"></el-table-column>
            <el-table-column prop="name" label="歌单名称"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
<!--                    <el-button type="success" @click="handleSelectSong(scope.row)">歌曲</el-button>-->
                    <el-button type="success" @click="handleDeleteSongs(scope.row)">查看/移除歌曲</el-button>
                    <el-button type="primary" @click="handleAddSongs(scope.row)">移入歌曲</el-button>
                    <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>

    <!-- 歌单分页 -->
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount">
        </el-pagination>
    </div>
</div>

<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el: "#app",
        mounted() {
            this.loadPlaylists();
            //this.send();
        },
        data() {
            return {
                formData: {
                    name: '',
                    file: null
                },
                dialogVisiblePlaylist: false,
                dialogVisibleSong: false,
                tableData: [],
                songData: [],
                currentPage: 1,
                pageSize: 5,
                totalCount: 0,
                currentPageSong: 1,
                pageSizeSong: 5,
                totalCountSong: 0,
                selectedPlaylistId: null,
                isAddMode: true, // 当前操作模式（true=移入/false=移出）
                dialogTitle: "管理歌单歌曲",
            };
        },
        methods: {
            // send() {
            //     axios.get('/MVCDemo/playList/send', {
            //
            //     }).then(resp => {
            //        alert(resp.data);
            //     });
            // },

            // 加载歌单列表
            loadPlaylists() {
                axios.get('/MVCDemo/playList/getPlayListByUserId', {
                    params: {
                        currentPage: this.currentPage,
                        pageSize: this.pageSize
                    }
                }).then(resp => {//alert(resp.data.totalCount)
                    this.tableData = resp.data.rows;
                    this.totalCount = resp.data.totalCount;
                });
            },
            handleFileChange(event) {
                this.formData.file = event.target.files[0];
            },

            // 创建歌单
            submitForm() {
                if (!this.formData.name) {
                    this.$message('请填写歌单名称');
                    return;
                }
                const formData = new FormData();
                formData.append('name', this.formData.name);
                formData.append('file', this.formData.file);
                axios.post("/MVCDemo/playList/addPlayList", formData).then(resp=> {
                    // 显示信息
                    this.$message(resp.data.message);
                    this.dialogVisiblePlaylist = false;
                    this.loadPlaylists();
                }).catch(error=>{
                    this.$message(error.data?.message || '上传失败');
                });
            },

            // 删除歌单
            handleDelete(playlist) {
                this.$confirm('确定删除该歌单吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    axios.post(`/MVCDemo/playList/deletePlayList?playListId=${playlist.id}`)
                        .then(resp => {
                            this.$message.success(resp.data.message);
                            this.loadPlaylists();
                        });
                });
            },

            // 打开歌曲管理
            handleSelectSong(playlist) {
                this.selectedPlaylistId = playlist.id;
                this.dialogVisibleSong = true;
                this.currentPageSong = 1;          // 重置到第一页
                this.pageSizeSong = 5;             // 重置每页条数
                this.loadSongs();
            },

            // 加载歌曲数据
            loadSongs() {
                const apiUrl = this.isAddMode
                    ? '/MVCDemo/playList/listSongIdListOutPlayListId'
                    : '/MVCDemo/playList/listSongIdListByPlayListId';

                axios.get(apiUrl, {
                    params: {
                        playListId: this.selectedPlaylistId,
                        currentPage: this.currentPageSong,
                        pageSize: this.pageSizeSong
                    }
                }).then(resp => {
                    this.songData = resp.data.rows;
                    this.totalCountSong = resp.data.totalCount;
                });
            },
            handleAddSongs(playlist) {
                this.isAddMode = true;
                this.dialogTitle = "添加歌曲到歌单";
                this.selectedPlaylistId = playlist.id;
                this.dialogVisibleSong = true;
                this.currentPageSong = 1;
                this.loadSongs();
            },

            handleDeleteSongs(playlist) {
                this.isAddMode = false;
                this.dialogTitle = "从歌单移除歌曲";
                this.selectedPlaylistId = playlist.id;
                this.dialogVisibleSong = true;
                this.currentPageSong = 1;
                this.loadSongs();
            },
            // 新增歌曲操作方法
            handleAddToPlaylist(song) {//alert(0);alert(this.selectedPlaylistId);alert(song.id);
                axios.get('/MVCDemo/playList/turnInOrOutPlaylist', {
                    params:{
                        playListId: this.selectedPlaylistId,
                        songId: song.id
                    }
                }).then(resp => {
                    this.$message.success(resp.data.message);
                    this.loadSongs(); // 刷新列表
                });
            },

            handleRemoveFromPlaylist(song) {//alert(1);alert(song.id);//alert(this.selectedPlaylistId);
                axios.get('/MVCDemo/playList/turnInOrOutPlaylist', {
                    params: {
                        playListId: this.selectedPlaylistId,
                        songId: song.id
                    }
                }).then(resp => {
                    this.$message.success(resp.data.message);
                    this.loadSongs(); // 刷新列表
                });
            },
            // 分页处理
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadPlaylists();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadPlaylists();
            },
            // 歌曲修改分页处理方法
            handleSizeChangeSong(val) {
                this.pageSizeSong = val;
                this.currentPageSong = 1;
                this.loadSongs();
            },
            handleCurrentChangeSong(val) {
                this.currentPageSong = val;
                this.loadSongs();
            }
        }
    });
</script>
</body>
</html>